<template>
  <div id="nav-bar">
    <nav-bar>
      <template v-slot:center>
        <div>购物车({{length}})</div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import {mapGetters} from 'vuex'

  export default {
    name: "CartNavBar",
    components:{
      NavBar,
    },
    computed:{
      //第一种写法：数组写法，getters里面的函数名与这里用到的名字一致
      // ...mapGetters(['cartListLength', 'cartList'])
      //第二种写法: 对象写法 ：自定义这里的名字
      ...mapGetters({
        length:'cartListLength',
        // cartList:'cartList'  这个组件里用不到cartList
      })
    }
  }
</script>

<style scoped>
  #nav-bar{
    background-color: #50b7c1;
  }
</style>